<template>
  <div class="baduanjin-container">
    <h1 class="page-title">八段锦客户信息管理/添加八段锦客户</h1>
    <div class="operation-bar">
      <el-button @click="showAddDialog = true" type="primary" icon="el-icon-plus">添加客户</el-button>
      <el-button @click="fetchCustomers" type="success" icon="el-icon-refresh">刷新数据</el-button>
    </div>

    <el-table :data="tableData" height="500" style="width: 100%" class="customer-table" stripe v-loading="loading">
      <el-table-column prop="date" label="注册日期" width="180" align="center" />
      <el-table-column prop="id" label="会员编号" width="100" align="center" />
      <el-table-column prop="name" label="姓名" width="100" align="center" />
      <el-table-column prop="gender" label="性别" width="100" align="center" />
      <el-table-column prop="age" label="年龄" width="100" align="center" />
      <el-table-column prop="phone" label="电话" width="200" align="center" />
      <el-table-column prop="level" label="八段锦水平" width="200" align="center">
        <template slot-scope="{row}">
          <el-tag :type="getLevelTagType(row.level)">{{ row.level }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="course" label="课程类型" width="200" align="center">
        <template slot-scope="{row}">
          <div class="course-display">
            <img :src="getCourseImage(row.course)" class="course-icon" />
            <span class="course-text">{{ row.course }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加客户对话框 -->
    <el-dialog :visible.sync="showAddDialog" title="添加八段锦客户" width="650px" class="add-dialog">
      <el-form :model="addForm" label-width="100px" label-position="left" :rules="rules" ref="addFormRef">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="注册日期" prop="date">
              <el-date-picker v-model="addForm.date" type="date" placeholder="选择日期" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员编号" prop="id">
              <el-input v-model="addForm.id" placeholder="请输入整数类型" prefix-icon="el-icon-user" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="addForm.name" placeholder="请输入姓名" prefix-icon="el-icon-user" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="addForm.gender" placeholder="请选择性别" style="width: 100%">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input-number v-model="addForm.age" :min="0" :max="100" placeholder="请输入年龄" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="addForm.phone" placeholder="请输入电话" prefix-icon="el-icon-phone" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="八段锦水平" prop="level">
          <el-select v-model="addForm.level" placeholder="请选择八段锦水平" style="width: 100%">
            <el-option v-for="item in levelOptions" :key="item.value"
                       :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="课程类型" prop="course">
          <el-row :gutter="45">
            <el-col :span="12" v-for="course in courseOptions" :key="course.value">
              <div class="course-option" @click="addForm.course = course.value"
                   :class="{active: addForm.course === course.value}">
                <img :src="course.image" class="option-icon" />
                <div class="option-label">{{ course.label }}</div>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAddForm" :loading="adding">确定添加</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'BaduanjinCustomer',
  data() {
    return {
      showAddDialog: false,
      loading: false,
      adding: false,
      tableData: [],
      addForm: {
        date: '',
        id: '',
        name: '',
        gender: '',
        age: '',
        phone: '',
        level: '',
        course: ''
      },
      rules: {
        date: [{ required: true, message: '请选择注册日期', trigger: 'blur' }],
        id: [{ required: true, message: '请输入会员编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1[0-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        level: [{ required: true, message: '请选择八段锦水平', trigger: 'change' }],
        course: [{ required: true, message: '请选择课程类型', trigger: 'change' }]
      },
      levelOptions: [
        { value: '初级', label: '初级' },
        { value: '中级', label: '中级' },
        { value: '高级', label: '高级' }
      ],
      courseOptions: [
        { value: '北派', label: '北派', image: require('@/assets/north.jpg'), },
        { value: '南派', label: '南派', image: require('@/assets/south.jpg'), }
      ]
    };
  },
  methods: {
    async fetchCustomers() {
      try {
        this.loading = true;
        const response = await axios.get('/api/baduanjin/listbaduanjin');
        this.tableData = response.data.data || [];
      } catch (error) {
        this.$message.error('获取客户数据失败');
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
    async submitAddForm() {
      try {
        this.adding = true;

        await this.$refs.addFormRef.validate();

        if (this.addForm.date) {
          this.addForm.date = new Date(this.addForm.date).toISOString().split('T')[0];
        } else {
          this.addForm.date = new Date().toISOString().split('T')[0];
        }

        const response = await axios.post('/api/baduanjin/addbaduanjin', this.addForm);

        if (response.data.code === 200) {
          this.$message.success('添加客户成功');
          this.showAddDialog = false;
          this.fetchCustomers();

          this.$refs.addFormRef.resetFields();
          this.addForm = {
            date: '',
            id: '',
            name: '',
            gender: '',
            age: '',
            phone: '',
            level: '',
            course: ''
          };
        } else {
          this.$message.error(response.data.message || '添加客户失败');
        }
      } catch (error) {
        console.error(error);
      } finally {
        this.adding = false;
      }
    },
    getLevelTagType(level) {
      const map = {
        '初级': 'info',
        '中级': '',
        '高级': 'warning'
      };
      return map[level] || '';
    },
    getCourseImage(course) {
      const map = {
        '北派': require('@/assets/north.jpg'),
        '南派': require('@/assets/south.jpg')
      };
      return map[course] || '';
    }
  },
  mounted() {
    this.fetchCustomers();
  }
};
</script>

<style scoped>
.baduanjin-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.customer-table {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.course-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.course-icon {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  object-fit: contain;
}

.course-text {
  font-size: 14px;
}

.add-dialog {
  border-radius: 8px;
}

.course-option {
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.course-option:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}

.course-option.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.option-icon {
  width: 130px;
  height: 80px;
  margin-bottom: 12px;
  object-fit: contain;
}

.option-label {
  font-size: 16px;
  color: #606266;
  font-weight: 800;
}
</style>
